<template>
  <div>
    <a-page-header title="查询表格" :ghost="false" sub-title="查询表格" />
    <a-card class="mt-3">
      <a-form
        label-align="left"
        :labelCol="{ span: 8 }"
        :wrapperCol="{ span: 16 }"
        layout="inline"
      >
        <a-row align="middle">
          <a-col :span="4">
            <a-form-item label="订单号">
              <a-input placeholder="订单号" />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="对接时间">
              <a-input placeholder="对接时间" />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="订购类型">
              <a-input placeholder="订购类型" />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="订购类型">
              <a-input placeholder="订购类型" />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="订购类型">
              <a-input placeholder="订购类型" />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-button type="primary">查询</a-button>
            <a-button style="margin-left: 8px">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
      <a-divider class="my-1" />

      <div class="mb-1">
        <a-button type="primary" @click="showModal" size="small">
          <template #icon><icon name="ImportOutlined" /> </template>
          导入订单
        </a-button>
      </div>

      <a-table
        :columns="columns"
        :data-source="data"
        :pagination="pagination"
        :loading="loading"
        size="middle"
        rowKey="id"
      >
        <template #status="{ record }">
          {{ record.status == 1 ? "已导入" : "未导入" }}
        </template>
        <template #price="{ record }"> ￥ {{ record.price }} </template>
        <template #operation="{ record }">
          <a-button-group size="small">
            <a-button type="primary" @click="view(record)">
              <template #icon>
                <icon name="EyeOutlined" />
              </template>
            </a-button>
          </a-button-group>
        </template>
      </a-table>
    </a-card>

    <a-modal
      title="导入订单"
      v-model:visible="visibleModal"
      :multiple="false"
      :confirm-loading="confirmLoading"
      @ok="handleUpload"
    >
      <a-upload
        :file-list="fileList"
        :remove="handleRemove"
        :before-upload="beforeUpload"
      >
        <a-button>
          <icon name="upload-outlined" />
          选择文件
        </a-button>
      </a-upload>
    </a-modal>

    <a-drawer
      width="50%"
      placement="right"
      :closable="true"
      :visible="visible"
      @close="onClose"
    >
      <a-descriptions title="订单状态">
        <a-descriptions-item label="订单编号">
          16125189312663
        </a-descriptions-item>
        <a-descriptions-item label="订单类型"> 继续 </a-descriptions-item>
        <a-descriptions-item label="订购时间">
          2021-02-05 17:55:31
        </a-descriptions-item>
        <a-descriptions-item label="取消订单时间">
          2021-02-05 17:56:28
        </a-descriptions-item>
        <a-descriptions-item label="订单生成方式"> PC </a-descriptions-item>
      </a-descriptions>
      <a-descriptions title="商品信息">
        <a-descriptions-item label="订单编号">
          16125189312663
        </a-descriptions-item>
        <a-descriptions-item label="订单类型"> 继续 </a-descriptions-item>
        <a-descriptions-item label="订购时间">
          2021-02-05 17:55:31
        </a-descriptions-item>
        <a-descriptions-item label="取消订单时间">
          2021-02-05 17:56:28
        </a-descriptions-item>
        <a-descriptions-item label="订单生成方式"> PC </a-descriptions-item>
      </a-descriptions>
      <a-descriptions title="支付信息">
        <a-descriptions-item label="订单编号">
          16125189312663
        </a-descriptions-item>
        <a-descriptions-item label="订单类型"> 继续 </a-descriptions-item>
        <a-descriptions-item label="订购时间">
          2021-02-05 17:55:31
        </a-descriptions-item>
        <a-descriptions-item label="取消订单时间">
          2021-02-05 17:56:28
        </a-descriptions-item>
        <a-descriptions-item label="订单生成方式"> PC </a-descriptions-item>
      </a-descriptions>
    </a-drawer>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, Ref, ref } from "vue";
import {
  Empty,
  Card,
  Col,
  Row,
  Divider,
  Drawer,
  Descriptions,
  Modal,
  PageHeader,
  Table,
  Button,
  Form,
  Input,
  message,
  Upload,
} from "ant-design-vue";
import { Icon } from "@/components";
import { JDOrder } from "@/types";

const columns = [
  {
    title: "订单编号",
    dataIndex: "id",
  },
  {
    title: "月号",
    dataIndex: "start_month_code",
  },
  {
    title: "版本",
    dataIndex: "version",
  },
  {
    title: "长度",
    dataIndex: "length",
  },
  {
    title: "价格",
    dataIndex: "price",
    slots: { customRender: "price" },
  },
  {
    title: "状态",
    dataIndex: "status",
    align: "center",
    slots: { customRender: "status" },
  },
  {
    title: "对接时间",
    dataIndex: "processed_at",
  },
  {
    title: "收货人",
    dataIndex: "user",
  },
  {
    title: "联系电话",
    dataIndex: "cellphone",
  },
  {
    title: "类型",
    width: "80px",
    align: "center",
    dataIndex: "type",
  },
  {
    title: "操作",
    width: "80px",
    align: "center",
    slots: { customRender: "operation" },
  },
];

interface FileItem {
  uid: string;
  name?: string;
  status?: string;
  response?: string;
  url?: string;
  preview?: string;
  originFileObj?: any;
  file: string | Blob;
}
export default defineComponent({
  components: {
    ADivider: Divider,
    ADrawer: Drawer,
    AEmpty: Empty,
    ACard: Card,
    ACol: Col,
    ARow: Row,
    AInput: Input,
    APageHeader: PageHeader,
    ATable: Table,
    AForm: Form,
    AFormItem: Form.Item,
    AButton: Button,
    AButtonGroup: Button.Group,
    Icon,
    AModal: Modal,
    AUpload: Upload,
    ADescriptions: Descriptions,
    ADescriptionsItem: Descriptions.Item,
  },
  setup() {
    const loading = ref(true);
    const data: Ref<JDOrder[]> = ref([]);
    const pagination = reactive({});
    onMounted(() => {});

    const visible = ref<boolean>(false);
    const view = (row: JDOrder) => {
      visible.value = true;
    };

    const onClose = () => {
      visible.value = false;
    };

    const visibleModal = ref<boolean>(false);
    const confirmLoading = ref<boolean>(false);
    const showModal = () => {
      visibleModal.value = true;
    };

    const fileList = ref<FileItem[]>([]);
    const handleRemove = (file: FileItem) => {
      fileList.value = [];
    };

    const beforeUpload = (file: FileItem) => {
      fileList.value = [file];
      return false;
    };

    const handleUpload = () => {
      const formData = new FormData();
      fileList.value.forEach((file: FileItem) => {
        formData.append("files[]", file as any);
      });
      confirmLoading.value = true;
    };

    return {
      showModal,
      visibleModal,
      confirmLoading,

      fileList,
      handleRemove,
      beforeUpload,
      handleUpload,

      visible,
      onClose,
      columns,
      data,
      loading,
      view,
      pagination,
    };
  },
});
</script>

<style lang="less" scoped>
.title {
  font-weight: bold;
  font-size: 16px;
}
</style>
